<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" >
<head>
    <title>我的赠票</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no">
    <link rel="stylesheet" href="/css/weui.min.css"/>
    <link rel="stylesheet" href="/css/weuix.css"/>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        header{
            width: 100%;
        }
        header img{
            width: 100%;
        }
        .weui-c-title{
            font-size: 16px;
            color: #07C160;
            line-height: 20px;
            text-align: center;
            padding-left:80px;
            margin-bottom:5px ;
            vertical-align: middle;
        }
        .weui-vcode-btn{
            font-size: 15px;
        }
        .weui-content{
            padding-top:5px ;
        }
        .weui-c-title a{
            float: right;
            text-decoration:underline;
        }
        .weui-cells:after{
            border-bottom: none;
        }
        .weui-label{
            font-weight: normal;
        }
    </style>
    <script src="/js/jquery.js"></script>
    <script src="/js/zepto.min.js"></script>
    <script src="/js/zepto.weui.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
    <script>
        var phone=[[${phone}]];
        var total=[[${total}]];
        var userNumber=[[${userNumber}]];
        var time=60;

        function timeSet(o){
            time=time-1;
            if(time==0){
                time=60;
                $(o).removeAttr("disabled").removeClass("weui-btn_loading").html("点击获取")
            }else{
                $(o).attr('disabled','disabled').html(time+"s后获取").addClass("weui-btn_loading")
                setTimeout(function(){timeSet(o)},1000);
            }
        }

        function settime(o){
            try {
                if($("#phone").val()==""){
                    $.toast("请输入手机号", "cancel");
                    $("#phone").focus();
                }else if(!/^1[2-9][0-9]{9}$/.test($("#phone").val())){
                    $.toast("请输入正确的手机号", "cancel");
                    $("#phone").focus();
                }else if($("#phone").val()!=phone){
                    $.toast("手机号不是赠票号码", "cancel");
                }else{
                    $(o).attr('disabled','disabled');
                    $.post("/api/Validator/",{phone:$("#phone").val(),code:"[[${projectId}]]"},function(result){
                        if(result.hasError){
                            $.toast("发送短信失败", "cancel");
                            $(o).removeAttr("disabled");
                        }else{
                            $("input[name=code]").focus();
                            $.toast("发送成功","success");
                            timeSet(o);
                        }
                    }).error(function(){
                        $.toast("发送短信失败", "cancel");
                        $(o).removeAttr("disabled");
                    })
                }
            }catch(e){

            }
        }

        function verifycode(o){
            try {
                if($("#phone").val()==""){
                    $.toast("请输入手机号", "cancel");
                    $("#phone").focus();
                }else if(!/^1[2-9][0-9]{9}$/.test($("#phone").val())){
                    $.toast("请输入正确的手机号", "cancel");
                    $("#phone").focus();
                }else if($("#phone").val()!=phone){
                    $.toast("手机号不是赠票号码", "cancel");
                }else if($("input[name=code]").val()==""){
                    $.toast("请输入验证码", "cancel");
                    $("#phone").focus();
                } else{
                    $(o).attr('disabled','disabled');
                    $.get("/api/Validator/"+$("#phone").val()+"/"+$("input[name=code]").val(),function(result){
                        if(result.hasError){
                            $.toast(result.message, "cancel");
                            $(o).removeAttr("disabled");
                        }else{
                            $("input").removeAttr("disabled").removeClass("weui-btn_disabled");
                            $.toast("验证成功","success");
                            $("input[name=total]").focus();
                            $("#show").hide();
                            $("#hide").show();
                        }
                    }).error(function(){
                        $.toast("验证失败", "cancel");
                        $(o).removeAttr("disabled");
                    })
                }
            }catch(e){

            }
        }

        $(function(){
            $("#hide").hide();
            $("input[name=total]").attr('placeholder','可用票:'+(total-userNumber)+" 张").attr('max',(total-userNumber));

            $("form").submit(function(){
                try {
                    if($("#phone").val()==""){
                        $.toast("请输入手机号", "cancel");
                        $("#phone").focus();
                    }else if(!/^1[2-9][0-9]{9}$/.test($("#phone").val())){
                        $.toast("请输入正确的手机号", "cancel");
                        $("#phone").focus();
                    }else if($("#phone").val()!=phone){
                        $.toast("手机号不是赠票号码", "cancel");
                    }else if($("input[name=code]").val()==""){
                        $.toast("请输入验证码", "cancel");
                        $("#phone").focus();
                    } else if($("#phone").val()==$("input[name=phone]").val()){
                        $.toast("不能转发给自己", "cancel");
                    }else{
                        $.showLoading();
                        
                        axios.put("/api/TicketComplimentary/[[${id}]]",{"phone":$("#tel").val(),"name":$("#name").val(),"total":$("#total").val()}).then(res=>{
                            if(res.data.hasError){
                                $.hideLoading();
                                $.toast("转赠成功", "cancel");
                            }else{
                                $.hideLoading();
                                $.toast("转赠成功","success");
                            }
                        }).catch(res=>{
                                $.hideLoading();
                                $.toast("转赠失败", "cancel");
                        })
                    }
                } catch (error) {
                    console.log(error)
                    $.toast("转赠失败", "cancel");
                    $.hideLoading();
                }

                return false;
            })
        })
    </script>
</head>
<script>
</script>
<body>
    <header>
        <img  th:src="${bg}">
    </header>
    <form method="POST">
        <div class="weui-content">
            <p class="weui-c-title">
               我要赠票<a th:href="'/my/'+${id}">查看我的票<span class="weui-badge" th:text="${total-userNumber}" style="margin-left: 5px;"></span></a>
            </p>
            <div class="weui-c-content">
                    <div>
                        <div id="show"  class="weui-cells weui-cells_form">
                            <div class="weui-cell weui-cell_vcode">
                                <div class="weui-cell__hd"><label class="weui-label">我的手机号</label></div>
                                <div class="weui-cell__bd">
                                    <input class="weui-input" id="phone" pattern="^1[2-9][0-9]{9}$" placeholder="请输入手机号" type="tel" required>
                                </div>
                                <div class="weui-cell__ft">
                                    <button type="button" class="weui-vcode-btn" onclick="settime(this)">立刻获取</button>
                                </div>
                            </div>
                            <div class="weui-cell weui-cell_vcode">
                                <div class="weui-cell__hd">
                                    <label class="weui-label">验证码</label>
                                </div>
                                <div class="weui-cell__bd">
                                    <input class="weui-input" name="code" placeholder="请输入验证码" type="number" required>
                                </div>
                                <div class="weui-cell__ft">
                                    <button type="button" class="weui-vcode-btn" onclick="verifycode(this)">点击验证</button>
                                </div>
                            </div>
                            <div class="weui-cell"></div>
                        </div>
                        <div id="hide"  class="weui-cells weui-cells_form">
                        <div class="weui-cell">
                            <div class="weui-cell__hd"><label class="weui-label">转赠票数</label></div>
                            <div class="weui-cell__bd">
                                <input class="weui-input" id="total" name="total" min="1" type="number" >
                            </div>
                        </div>
                        <div class="weui-cell">
                            <div class="weui-cell__hd"><label class="weui-label">接收人</label></div>
                            <div class="weui-cell__bd">
                                <input class="weui-input" id="name" name="name" placeholder="请输入接收人姓名" type="text" required>
                            </div>
                        </div>
                        <div class="weui-cell">
                            <div class="weui-cell__hd"><label class="weui-label">接收人手机</label></div>
                            <div class="weui-cell__bd">
                                <input class="weui-input" id="tel" name="phone" pattern="^1[2-9][0-9]{9}$" placeholder="请输入接收人手机号" type="tel" required>
                            </div>
                        </div>
                        <div class="weui-cell">
                            <div class="weui-cell__bd">
                                <div class="button-sp-area">
                                    <input type="submit" class="weui-btn weui-btn_primary " value="赠  票">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <div class="weui-footer weui-footer_fixed-bottom">
        <p class="weui-footer__text">Copyright &copy; 广东慧展科技有限公司</p>
    </div>
</body>
</html>